<template>
  <div class="bg" id="bg">
    <div class="content">
      <slot name="content"></slot>
    </div>
    <div class="close">
      <slot name="close"></slot>
    </div>
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="one" v-on:click="switch_one">
      <img class="img-one" v-show="img_one_show" src="../../../assets/read/1.0/3-assets/read_mode-01.png">
      <div class="content-one" v-show="content_one_show">
        <div class="icon1">
          <img class="img-item" src="../../../assets/icon/h0001.png">
        </div>
        <div class="title1">
          <slot name="title01_1"></slot>
        </div>
        <div class="icon2">
          <img class="img-item" src="../../../assets/icon/h0015.png">
        </div>
        <div class="title2">
          <slot name="title01_2"></slot>
        </div>
      </div>
    </div>
    <div class="two" v-on:click="switch_two">
      <img class="img-two" v-show="img_two_show" src="../../../assets/read/1.0/3-assets/read_mode-02.png">
      <div class="content-two" v-show="content_two_show">
        <div class="icon1">
          <img class="img-item" src="../../../assets/icon/chunb.png">
        </div>
        <div class="title1">
          <slot name="title02_1"></slot>
        </div>
        <div class="icon2">
          <img class="img-item" src="../../../assets/icon/chunb.png">
        </div>
        <div class="title2">
          <slot name="title02_2"></slot>
        </div>
        <div class="icon3">
          <img class="img-item" src="../../../assets/icon/paperb.png">
        </div>
        <div class="title3">
          <slot name="title02_3"></slot>
        </div>
      </div>
    </div>
    <div class="three" v-on:click="switch_three">
      <img class="img-three" v-show="img_three_show" src="../../../assets/read/1.0/3-assets/read_mode-03.png">
      <div class="content-three" v-show="content_three_show">
        <div class="icon1">
          <img class="img-item" src="../../../assets/icon/h0001.png">
        </div>
        <div class="title1">
          <slot name="title03_1"></slot>
        </div>
        <div class="icon2">
          <img class="img-item" src="../../../assets/icon/h0015.png">
        </div>
        <div class="title2">
          <slot name="title03_2"></slot>
        </div>
      </div>
    </div>
    <div class="four" v-on:click="switch_four">
      <img class="img-four" v-show="img_four_show" src="../../../assets/read/1.0/3-assets/read_mode-04.png">
      <div class="content-four" v-show="content_four_show">
        <div class="icon1">
          <img class="img-item" src="../../../assets/icon/formb.png">
        </div>
        <div class="title1">
          <slot name="title04_1"></slot>
        </div>
        <div class="icon2">
          <img class="img-item" src="../../../assets/icon/earphoneb.png">
        </div>
        <div class="title2">
          <slot name="title04_2"></slot>
        </div>
      </div>
    </div>
    <div class="five" v-on:click="switch_five">
      <img class="img-five" v-show="img_five_show" src="../../../assets/read/1.0/3-assets/read_mode-05.png">
      <div class="content-five" v-show="content_five_show">
        <div class="icon1">
          <img class="img-item" src="../../../assets/icon/pictureb.png">
        </div>
        <div class="title1">
          <slot name="title05_1"></slot>
        </div>
        <div class="icon2">
          <img class="img-item" src="../../../assets/icon/pictureb.png">
        </div>
        <div class="title2">
          <slot name="title05_2"></slot>
        </div>
        <div class="icon3">
          <img class="img-item" src="../../../assets/icon/bookb.png">
        </div>
        <div class="title3">
          <slot name="title05_3"></slot>
        </div>
      </div>
    </div>
    <div class="six" v-on:click="switch_six">
      <img class="img-six" v-show="img_six_show" src="../../../assets/read/1.0/3-assets/read_mode-06.png">
      <div class="content-six" v-show="content_six_show">
        <div class="icon1">
          <img class="img-item" src="../../../assets/icon/chunb.png">
        </div>
        <div class="title1">
          <slot name="title06_1"></slot>
        </div>
        <div class="icon2">
          <img class="img-item" src="../../../assets/icon/chunb.png">
        </div>
        <div class="title2">
          <slot name="title06_2"></slot>
        </div>
        <div class="icon3">
          <img class="img-item" src="../../../assets/icon/paperb.png">
        </div>
        <div class="title3">
          <slot name="title06_3"></slot>
        </div>
      </div>
    </div>
    <div class="seven" v-on:click="switch_seven">
      <img class="img-seven" v-show="img_seven_show" src="../../../assets/read/1.0/3-assets/read_mode-07.png">
      <div class="content-seven" v-show="content_seven_show">
        <div class="icon1">
          <img class="img-item" src="../../../assets/icon/pictureb.png">
        </div>
        <div class="title1">
          <slot name="title07_1"></slot>
        </div>
        <div class="icon2">
          <img class="img-item" src="../../../assets/icon/pictureb.png">
        </div>
        <div class="title2">
          <slot name="title07_2"></slot>
        </div>
        <div class="icon3">
          <img class="img-item" src="../../../assets/icon/bookb.png">
        </div>
        <div class="title3">
          <slot name="title07_3"></slot>
        </div>
      </div>
    </div>
    <div class="eight" v-on:click="switch_eight">
      <img class="img-eight" v-show="img_eight_show" src="../../../assets/read/1.0/3-assets/read_mode-08.png">
      <div class="content-eight" v-show="content_eight_show">
        <div class="icon1">
          <img class="img-item" src="../../../assets/icon/formb.png">
        </div>
        <div class="title1">
          <slot name="title08_1"></slot>
        </div>
        <div class="icon2">
          <img class="img-item" src="../../../assets/icon/earphoneb.png">
        </div>
        <div class="title2">
          <slot name="title08_2"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      img_one_show: true,
      content_one_show: false,
      img_two_show: true,
      content_two_show: false,
      img_three_show: true,
      content_three_show: false,
      img_four_show: true,
      content_four_show: false,
      img_five_show: true,
      content_five_show: false,
      img_six_show: true,
      content_six_show: false,
      img_seven_show: true,
      content_seven_show: false,
      img_eight_show: true,
      content_eight_show: false
    }
  },
  mounted () {
    var links = document.querySelectorAll('a')
    Array.prototype.forEach.call(links, function (links) {
      links.addEventListener('click', function (evt) {
        evt.preventDefault()
        if (this.href.slice(0, 16) === 'http://127.0.0.1') {
          const BrowserWindow = require('electron').remote.BrowserWindow
          BrowserWindow.showDevTools = false
          let win = new BrowserWindow({
            width: 1280,
            height: 720,
            webPreferences: {
              nodeIntegration: false
            },
            show: false,
            backgroundColor: '#2e2c29'
          })
          win.setFullScreen(true)
          win.loadURL(this.href)
          win.once('ready-to-show', () => {
            win.show()
          })
        } else {
          console.log('======')
          window.location.href = this.href
        }
      })
    })
  },
  methods: {
    switch_one: function () {
      if (this.img_one_show === true) {
        this.img_one_show = false
        this.content_one_show = true
        this.img_two_show = true
        this.content_two_show = false
        this.img_three_show = true
        this.content_three_show = false
        this.img_four_show = true
        this.content_four_show = false
        this.img_five_show = true
        this.content_five_show = false
        this.img_six_show = true
        this.content_six_show = false
        this.img_seven_show = true
        this.content_seven_show = false
        this.img_eight_show = true
        this.content_eight_show = false
      } else {
        this.img_one_show = true
        this.content_one_show = false
      }
    },
    switch_two: function () {
      if (this.img_two_show === true) {
        this.img_two_show = false
        this.content_two_show = true
        this.img_one_show = true
        this.content_one_show = false
        this.img_three_show = true
        this.content_three_show = false
        this.img_four_show = true
        this.content_four_show = false
        this.img_five_show = true
        this.content_five_show = false
        this.img_six_show = true
        this.content_six_show = false
        this.img_seven_show = true
        this.content_seven_show = false
        this.img_eight_show = true
        this.content_eight_show = false
      } else {
        this.img_two_show = true
        this.content_two_show = false
      }
    },
    switch_three: function () {
      if (this.img_three_show === true) {
        this.img_three_show = false
        this.content_three_show = true
        this.img_one_show = true
        this.content_one_show = false
        this.img_two_show = true
        this.content_two_show = false
        this.img_four_show = true
        this.content_four_show = false
        this.img_five_show = true
        this.content_five_show = false
        this.img_six_show = true
        this.content_six_show = false
        this.img_seven_show = true
        this.content_seven_show = false
        this.img_eight_show = true
        this.content_eight_show = false
      } else {
        this.img_three_show = true
        this.content_three_show = false
      }
    },
    switch_four: function () {
      if (this.img_four_show === true) {
        this.img_four_show = false
        this.content_four_show = true
        this.img_one_show = true
        this.content_one_show = false
        this.img_three_show = true
        this.content_three_show = false
        this.img_two_show = true
        this.content_two_show = false
        this.img_five_show = true
        this.content_five_show = false
        this.img_six_show = true
        this.content_six_show = false
        this.img_seven_show = true
        this.content_seven_show = false
        this.img_eight_show = true
        this.content_eight_show = false
      } else {
        this.img_four_show = true
        this.content_four_show = false
      }
    },
    switch_five: function () {
      if (this.img_five_show === true) {
        this.img_five_show = false
        this.content_five_show = true
        this.img_one_show = true
        this.content_one_show = false
        this.img_three_show = true
        this.content_three_show = false
        this.img_four_show = true
        this.content_four_show = false
        this.img_two_show = true
        this.content_two_show = false
        this.img_six_show = true
        this.content_six_show = false
        this.img_seven_show = true
        this.content_seven_show = false
        this.img_eight_show = true
        this.content_eight_show = false
      } else {
        this.img_five_show = true
        this.content_five_show = false
      }
    },
    switch_six: function () {
      if (this.img_six_show === true) {
        this.img_six_show = false
        this.content_six_show = true
        this.img_one_show = true
        this.content_one_show = false
        this.img_three_show = true
        this.content_three_show = false
        this.img_four_show = true
        this.content_four_show = false
        this.img_five_show = true
        this.content_five_show = false
        this.img_two_show = true
        this.content_two_show = false
        this.img_seven_show = true
        this.content_seven_show = false
        this.img_eight_show = true
        this.content_eight_show = false
      } else {
        this.img_six_show = true
        this.content_six_show = false
      }
    },
    switch_seven: function () {
      if (this.img_seven_show === true) {
        this.img_seven_show = false
        this.content_seven_show = true
        this.img_one_show = true
        this.content_one_show = false
        this.img_three_show = true
        this.content_three_show = false
        this.img_four_show = true
        this.content_four_show = false
        this.img_five_show = true
        this.content_five_show = false
        this.img_six_show = true
        this.content_six_show = false
        this.img_two_show = true
        this.content_two_show = false
        this.img_eight_show = true
        this.content_eight_show = false
      } else {
        this.img_seven_show = true
        this.content_seven_show = false
      }
    },
    switch_eight: function () {
      if (this.img_eight_show === true) {
        this.img_eight_show = false
        this.content_eight_show = true
        this.img_one_show = true
        this.content_one_show = false
        this.img_three_show = true
        this.content_three_show = false
        this.img_four_show = true
        this.content_four_show = false
        this.img_five_show = true
        this.content_five_show = false
        this.img_six_show = true
        this.content_six_show = false
        this.img_seven_show = true
        this.content_seven_show = false
        this.img_two_show = true
        this.content_two_show = false
      } else {
        this.img_eight_show = true
        this.content_eight_show = false
      }
    }
  }
}
</script>

<style scoped>
.bg{
  background:url(../../../assets/read/1.0/3-assets/bg.jpg);
  background-size:100%;
  height:720px;
  width:1280px;
  position: relative;
  margin:0 auto;
  font-size: 20px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.btn_go{
  height:100%;
  width:100%;
  opacity: 0;
  cursor:pointer;
}
.content{
  background:url(../../../assets/read/1.0/3-assets/content.png) no-repeat;
  background-size:100%;
  height:75px;
  width:100px;
  position: absolute;
  left:5px;
  top:25px;
}
.close{
  background:url(../../../assets/read/1.0/3-assets/close.png) no-repeat;
  background-size:100%;
  height:60px;
  width:60px;
  position: absolute;
  right:15px;
  top:15px;
}
.title{
  position: absolute;
  left:650px;
  top:20px;
  font-size: 26px;
  letter-spacing: 3px;
}
a{
  text-decoration: none;
  color:black;
}
.img-item{
  width:35px;
  height:35px;
}
.one{
  width:350px;
  height:200px;
  position: absolute;
  left:200px;
  top:-10px;
  transform: rotate(332deg);
}
.img-one{
  margin-left:0px;
  margin-top:90px;
  transform: rotate(-332deg);
}
.content-one{
  height:150px;
  width:210px;
  left:90px;
  top:70px;
  position: absolute;
}
.icon1{
  width:35px;
  height:35px;
  left:10px;
  position: absolute;
}
.icon2{
  width:35px;
  height:30px;
  left:10px;
  top:40px;
  position: absolute;
}
.icon3{
  width:35px;
  height:30px;
  left:10px;
  top:80px;
  position: absolute;
}
.title1{
  width:210px;
  height:26px;
  left:45px;
  top:3px;
  letter-spacing:3px;
  position: absolute;
  overflow: hidden;
}
.title2{
  width:200px;
  height:26px;
  left:45px;
  top:43px;
  letter-spacing:3px;
  position: absolute;
}
.title3{
  width:200px;
  height:26px;
  left:45px;
  top:83px;
  letter-spacing:3px;
  position: absolute;
}
.two{
  width:400px;
  height:200px;
  position: absolute;
  left:290px;
  top:170px;
  transform: rotate(-28deg);
}
.img-two{
  margin-left:10px;
  margin-top:10px;
  transform: rotate(-332deg);
}
.content-two{
  height:150px;
  width:170px;
  left:110px;
  top:50px;
  position: absolute;
}
.three{
  width:330px;
  height:200px;
  position: absolute;
  right:200px;
  top:120px;
  transform: rotate(-28deg);
}
.content-three{
  height:150px;
  width:250px;
  left:80px;
  top:50px;
  position: absolute;
}
.img-three{
  margin-top:100px;
  transform: rotate(28deg);
}
.four{
  width:310px;
  height:200px;
  position: absolute;
  left:10px;
  top:350px;
  transform: rotate(-28deg);
}
.img-four{
  margin-left:200px;
  transform: rotate(28deg);
}
.content-four{
  height:150px;
  width:250px;
  left:50px;
  top:50px;
  position: absolute;
}
.five{
  width:400px;
  height:200px;
  position: absolute;
  left:400px;
  top:360px;
  transform: rotate(-28deg);
}
.img-five{
  margin-left:280px;
  margin-top: 10px;
  transform: rotate(28deg);
}
.content-five{
  height:150px;
  width:250px;
  left:100px;
  top:50px;
  position: absolute;
}
.six{
  width:380px;
  height:200px;
  position: absolute;
  right:50px;
  top:310px;
  transform: rotate(-28deg);
}
.img-six{
  margin-left: 10px;
  transform: rotate(28deg);
}
.content-six{
  height:150px;
  width:250px;
  left:100px;
  top:40px;
  position: absolute;
}
.seven{
  width:250px;
  height:170px;
  position: absolute;
  left:160px;
  bottom:25px;
  transform: rotate(-28deg);
}
.img-seven{
  transform: rotate(28deg);
  margin-left:150px;
  margin-top:90px;
}
.content-seven{
  height:150px;
  width:250px;
  top:20px;
  position: absolute;
}
.eight{
  width:300px;
  height:170px;
  position: absolute;
  right:30px;
  bottom:20px;
  transform: rotate(-28deg);
}
.img-eight{
  transform: rotate(27deg);
  margin-left:10px;
  margin-top:3px;
}
.content-eight{
  height:120px;
  width:200px;
  top:50px;
  left:110px;
  position: absolute;
}
</style>
